<template>
    <div>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <h3>fade淡入淡出</h3>
                <div class="grid-content bg-purple">
                    <linear></linear>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <h3>zoom缩放</h3>
                <div class="grid-content bg-purple">
                    <zoom></zoom>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                <h3>collapse展开折叠</h3>
                <div class="grid-content bg-purple">
                    <collapse></collapse>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import linear from '../animation/linear'
import zoom from '../animation/zoom'
import collapse from '../animation/collapse'
export default {
  data: () => ({}),
  components: {
    linear,
    zoom,
    collapse
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
